<template>
    <div class="main-page">
        <el-form :model="formData" label-position="left" ref="formData"
                 size="mini" class="demo-form-inline" >
            <el-row type="flex" justify="start">
                <el-col :span="8" >
                    <el-form-item label="选择老师">
                        <el-select size="mini" class="search-input" v-model="formData.eid"
                                   placeholder="请选择学生状态">
                            <el-option value="" label="全部"></el-option>
                            <el-option
                                v-for="item in gempList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8"  >
                    <el-form-item label="选择课程">
                        <el-select size="mini" class="search-input" v-model="formData.subid"
                                   placeholder="请选择学生状态">
                            <el-option value="" label="全部"></el-option>
                            <el-option
                                v-for="item in gsubjectList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8"  >
                    <el-form-item label="选择教室">
                        <el-select size="mini" class="search-input" v-model="formData.rid"
                                   placeholder="请选择学生状态">
                            <el-option value="" label="全部"></el-option>
                            <el-option
                                v-for="item in groomList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex" justify="start">
                <el-col :span="8">
                    <el-form-item prop="cname" label="搜索班级">
                        <el-col :span="6">
                            <el-input suffix-icon="el-icon-search" class="search-input" label="学生姓名" v-model="formData.cname"
                                      placeholder="必填"></el-input>
                        </el-col>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row>
            <el-button type="primary" size="mini" @click="resetForm('formData')" icon="el-icon-search">重置
            </el-button>
            <el-button type="primary" @click="this.initData" size="mini" icon="el-icon-search">搜索</el-button>
            <el-button type="info" @click="this.addStu" size="mini" icon="el-icon-search">添加学生</el-button>
            <el-button type="info" @click="this.planclass" size="mini" icon="el-icon-search">添加排课</el-button>
        </el-row>


        <div class="table_container">
            <el-table
                v-loading="loading"
                :data="tableData"
                highlight-current-row
                :row-class-name="tableRowClassName">
                style="width: 100%">
                <el-table-column
                    property="uid"
                    label="编号"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="name"
                    label="姓名"
                    min-width="10%">
                    <template scope="scope">
                        <el-button type="primary" size="mini" plain @click="selectUserDetail(index,scope.row)">
                            {{scope.row.name}}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    property="ename"
                    label="学生类别"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="schoolname"
                    label="学校"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="status"
                    label="状态"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="usertypedesc"
                    label="生日"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    label="操作"
                    min-width="10%">
                    <template scope="scope">
                        <el-button @click="userEdit(scope.$index,scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="deleteUser(scope.$index,scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="this.formData.pageno"
                    :page-size="10"
                    layout="total, prev, pager, next"
                    >
                </el-pagination>
            </div>
        </div>


    </div>


</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../components/headTop'
    import addStudent from '../page/addStudent'
    import updateStudent from '../page/updateStudent'
    import userDetail from '../page/userDetail.vue'
    import {userList, getuserDetail, returncharge, updateUserStatus, updateUser, deleteUser} from '@/api/getData'
    import ElInput from "../../node_modules/element-ui/packages/input/src/input.vue";
    import ElOption from "../../node_modules/element-ui/packages/select/src/option.vue";

    export default {
        data() {
            return {

                radio2: 0,
                addActive: 0,
                loading: false,
                AddDialogVisible: false,
                planDialogVisible: false,
                classrange: '',
                empsList: [],
                orgList:[],
                formData: {cname:'',subid:null,rid:null,eid:null},
                value: '',

            }
        },
        components: {
            ElOption,
            ElInput,
            headTop,
            addStudent,
            userDetail,
            updateStudent,

        },

        computed: {
            ...mapGetters(['groomList','gsubjectList','gempList','adminInfo' ])
        },

        created() {
        },
        mounted() {

        },
        methods: {
            ...mapActions(['getPeriod', 'setEmpschool', 'deleteEmpschool', 'fillSchoolEmps', 'getAllSchool']),
            tableRowClassName({row, rowIndex}) {

            },
            next() {
                if (this.addActive++ > 2) this.addActive = 0;
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            addStu() {
                this.AddDialogVisible = true;
            },
            planclass() {
                this.planDialogVisible = true;
            },

            resetForm(formName) {
                this.$refs[formName].resetFields(sk);
            },
            async deleteUser(a, row) {

            },
            async confirmdelete(row) {

            },
            async initData() {
                this.loading = true;
                this.tableData = [];
                var list = v.data.values;
                list.forEach(item => {
                    const tableData = {};
                    tableData.usertypedesc = this.usertypeMap[item.usertype];
                    tableData.usertype = item.usertype;
                    tableData.uid = item.uid;
                    tableData.name = item.name;
                    tableData.ename = item.ename;
                    tableData.schoolname = item.schoolname;
                    tableData.startend = item.startend;
                    tableData.status = this.userStatusMap[item.status];
                    tableData.remains = item.remainclass + "/" + item.remaincash + "/" + item.singlecash
                    this.tableData.push(tableData);

                });
                this.loading = false;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.formData.pageno = val;
                this.initData()
            },
        },
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .el-table .sks {
        background: #c2e7b0;
    }

    .el-table .zss {
        background: #ffffff;
    }

    .el-table .zts {
        background: #fab6b6;
    }

    .el-table .common {
        background: #F5F5F5;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .table_container {
        padding: 20px;
    }

    input {
        width: 600px;
    }
</style>
